<template>
	<view>
		<view class="wrap">
			<view class="top">
				<view class="item">
					<view class="left">收货人</view>
					<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" v-model="name" />
				</view>
				<view class="item">
					<view class="left">手机号码</view>
					<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" v-model="phone"/>
				</view>
				<view class="item" @tap="showRegionPicker">
					<view class="left">所在地区</view>
					<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" v-model="showSite" />
				</view>
				<view class="item address">
					<view class="left">详细地址</view>
					<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" v-model="address"/>
				</view>
				
			</view>
			<view class="bottom">
				<view class="default">
					<view class="left">
						<view class="set">设置默认地址</view>
						<view class="tips">提醒：每次下单会默认推荐该地址</view>
					</view>
					<view class="right"><switch :checked="isdefault" color="red" @change="setDefault" /></view>
				</view>
			</view>
			<u-picker mode="region" ref="uPicker" v-model="show" @confirm="confirm"/>
		</view>
		<view class="add">
			<button type="warn" size="mini" @click="confirm_edit">确认修改</button>
			<button class="mini-btn" type="warn" size="mini" @click.stop="delete_site()">删除</button>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		data(){
			return {
				show: false,  //省市区选择器
				showSite:'',//省区市
				name:'',
				phone:'',
				address:'',
				isdefault:true,
				sid:'',
				index:''
			}
		},
		
		
		computed:{
			...mapState(['userInformation']),
			province(){
				let arr=this.showSite.split(" ")
				return arr[0]
			},
			city(){
				let arr=this.showSite.split(" ")
				return arr[1]
			},
			district(){
				let arr=this.showSite.split(" ")
				return arr[2]
			}
		},
		
		onLoad(option) {
			let information = JSON.parse(option.info)
			console.log('editSite-information', information)
			console.log('editSite',option.index)
			this.index = option.index
			
			
			this.name = information.name
			this.phone = information.phone
			this.address = information.address
			this.showSite = information.pcd
			this.isdefault = information.isdefault==0?false:true
			this.sid = information.sid
			console.log('sid', this.sid)
		},
		
		methods:{
			setDefault(e) {
				this.isdefault= e.detail.value
				// console.log('isdefault',e.detail.value)
			},
			showRegionPicker() {
				this.show = true;
			},
			
			confirm(obj){
				console.log(obj)
				this.showSite = obj.province.label+' '+obj.city.label+' '+ obj.area.label
			},
			
			//删除地址
			delete_site(){
				uni.showModal({
					title: '提示',
					content: '您确定要删除吗',
					success: (res) => {
						if(res.confirm){
							console.log('editSite-用户点击确定');
							this.$request({
								url:'/supermarket/userlogin/deleteaddress/'+this.sid
							}).then(()=>{
								this.$store.commit('change_current',this.index)
								this.$store.dispatch('get_userSite',this.userInformation.userID)
								uni.navigateBack({
								    delta: 1
								});
							})
						}
					}
				})
			},
			
			
			//确认修改
			confirm_edit(){
				uni.showModal({
					title: '提示',
					content: '您确定要修改吗',
					success: (res) => {
						if(res.confirm){
							console.log('用户点击确定修改');
							this.$request({
								url:'/supermarket/userlogin/updateaddress',
								method:'POST',
								data:{
									userID:this.userInformation.userID,
									receiver_name:this.name,
									receiver_phone:this.phone,
									receiver_province:this.province,
									receiver_city:this.city,
									receiver_district:this.district,
									receiver_address:this.address,
									receiver_post:"100001",
									isdefault:this.isdefault?1:0,
									sid:this.sid
								}
							}).then(()=>{
								uni.showToast({
									title: '添加成功'
								})
								this.$store.dispatch('get_userSite',this.userInformation.userID)
								uni.navigateBack({
								    delta: 1
								});
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .line {
		color: $u-light-color;
		font-size: 28rpx;
	}
	.wrap {
		background-color: #f2f2f2;
		.top {
			background-color: #ffffff;
			border-top: solid 2rpx $u-border-color;
			padding: 22rpx;
			.item {
				display: flex;
				font-size: 32rpx;
				line-height: 100rpx;
				align-items: center;
				border-bottom: solid 2rpx $u-border-color;
				.left {
					width: 180rpx;
				}
				input {
					text-align: left;
					flex: 1;
				}
			}
			
			.address {
				padding: 20rpx 0;
				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}
			}
			.site-clipboard {
				padding-right: 40rpx;
				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}
				.clipboard {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: $u-tips-color;
					height: 80rpx;
					.icon {
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
		.bottom {
			margin-top: 20rpx;
			padding: 40rpx;
			padding-right: 0;
			background-color: #ffffff;
			font-size: 28rpx;
			.tag {
				display: flex;
				.left {
					width: 160rpx;
				}
				.right {
					display: flex;
					flex-wrap: wrap;
					.tags {
						width: 140rpx;
						padding: 16rpx 8rpx;
						border: solid 2rpx $u-border-color;
						text-align: center;
						border-radius: 50rpx;
						margin: 0 10rpx 20rpx;
						display: flex;
						font-size: 28rpx;
						align-items: center;
						justify-content: center;
						color: $u-content-color;
						line-height: 1;
					}
					.plus {
						//padding: 10rpx 0;
					}
				}
			}
			.default {
				margin-top: 50rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: solid 2rpx $u-border-color;
				line-height: 64rpx;
				.tips {
					font-size: 24rpx;
				}
				.right {
				}
			}
		}
	}
	
	.add{
		text-align: center;
		margin-top: 100rpx;
		display: flex;
		justify-content: space-around;
	}
</style>
